<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>emplooyee info</title>
</head>
<body>
<table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
    <tr>
        <th colspan="5">employee info</th>
    </tr>
    <tr>
        <td>id</td>
        <td>lastName</td>
        <td>email</td>
        <td>gender</td>
        <td><a th:href="@{/toAdd}">options</a></td>
    </tr>

    <tr th:each="emp : ${empList}">
        <td th:text="${emp.id}"></td>
        <td th:text="${emp.lastName}"></td>
        <td th:text="${emp.email}"></td>
        <td th:text="${emp.gender}"></td>
        <td>
            <!--删除 _method 必须是  delete-->
            <!--第一种方式-->
            <!--<a th:href="@{/employee/} + ${emp.id}">delete</a>-->
            <!--第二种方式-->
            <a @click="deleteEmployee" th:href="@{'/employee/'}+ ${emp.id}">delete</a>
            <a th:href="@{'/employee/'}+${emp.id}">update</a>
        </td>
    </tr>

</table>
<!--删除方式：点击超链接取消默认行为，而去提交当前表单。-->
<!--如果返回：405。消息：Request method 'GET' not supported。则需要重新将maven打包【vue没有加载到 target中】-->
<form id="deleteForm" method="post">
    <input type="hidden" name="_method" value="delete">
</form>
<!--引入 外部 vue-->
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script>
    var vue = new Vue({
        el: "#dataTable",/*表格id*/
        methods: {
            deleteEmployee: function (event) {
                //根据id 获取表单元素
                var deleteFor = document.getElementById("deleteForm");
                //将触发点击时间的超链接的 href属性赋值给表单的 action
                deleteFor.action = event.target.href;
                //提交表单
                deleteFor.submit();
                //取消超链接的默认行为
                event.preventDefault();
            }
        }
    })
</script>
</body>
</html>